<template>
    <div>
        <el-row :gutter="20" style="margin-bottom:20px">
            <el-col :span="6">
                <div>
                    <el-statistic group-separator="," :value="dailyData.dayUp" title="今日新增"></el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-statistic title="无症状比例" >
                        <template slot="formatter"> {{dailyData.noSymptom}}/{{dailyData.total}} </template>
                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-statistic group-separator="," :value="dailyData.nowCount" title="现有确诊"></el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-statistic group-separator="," :value="dailyData.cureCount" title="累积治愈"></el-statistic>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card style="width:100%;align-item:center;">
                    <div id="symptomChart" style="width:600px;height:500px"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card style="width:100%;align-item:center;">
                    <div id="medicalChart" style="width:700px;height:500px"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getCaseDailyData,getCaseData} from '@/api/cases'


import * as echarts from 'echarts/core';
import {
    DatasetComponent,
    TooltipComponent,
    GridComponent
} from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { TitleComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LegendComponent } from 'echarts/components';

echarts.use([
    LegendComponent,
    PieChart,
    DatasetComponent,
    TooltipComponent,
    GridComponent,
    BarChart,
    CanvasRenderer,
    TitleComponent
]);

export default {
    data() {
        return {
            dailyData:{},
            symptomOption:{
                dataset:{
                    source:[]
                },
                title: {
                    text: '症状出现次数前十统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        barWidth: '60%',
                        // data: [10, 52, 200, 334, 390, 330, 220]
                    }
                ]
            },
            symptomChart:'',
            medicalOption:{
                color:['#5470c6', '#91cc75', '#fac858', '#ee6666','#ff6a00', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
                title: {
                    text: '药品用量前十',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                    // name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    // data: [
                    //     { value: 1048, name: 'Search Engine' },
                    //     { value: 735, name: 'Direct' },
                    //     { value: 580, name: 'Email' },
                    //     { value: 484, name: 'Union Ads' },
                    //     { value: 300, name: 'Video Ads' }
                    // ],
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
            },
            medicalChart:'',
        };
    },

    mounted() {
        this.getCaseDailyData()
        this.getCaseData()
    },

    methods: {
        async getCaseData(){
            await getCaseData().then(resp=>{
                if(resp.code == 200){
                    
                    this.symptomOption['dataset'] = {source:resp.data['symtomTop10']}
                    this.medicalOption['dataset'] = {source:resp.data['medicalTop10']}
                    this.$nextTick(()=>{
                        this.chartinit()
                    })
                }
            })
        },
        chartinit(){
            this.symptomChart = echarts.init(document.getElementById('symptomChart'))
            this.symptomChart.setOption(this.symptomOption)

            this.medicalChart = echarts.init(document.getElementById('medicalChart'))
            this.medicalChart.setOption(this.medicalOption)
        },
        async getCaseDailyData(){
            await getCaseDailyData().then(resp=>{
                if(resp.code == 200){
                    this.dailyData = resp.data
                }
            })
        }

    },
};
</script>

<style scoped>

</style>